<template>
  <div class="box" v-if="isLoad">
    {{ 1 + 1 }}
    {{ test?.a }}
    {{ test.b }}
    <el-input v-model="test.b.value"></el-input>
    <input type="text" v-model="test.b.value" />
    <button @click="add()">添加</button>
    <button @click="test.add()">添加testAdd</button>
    <button @click="test2.add3()">添加testAdd3 markRaw形式</button>
    <div>
      test2.a
      {{ test2.a }}
      <input type="text" v-model="test2.a.value" />
    </div>
  </div>
</template>
<script>
import { ref, reactive, watch, toRef, triggerRef, watchEffect, markRaw, toRaw } from 'vue'
class Test {
  constructor() {
    this.a = ref(0)
    this.b = ref(1)
    this.c = {
      abc: ref('abc'),
      add() {
        console.log(this)
        console.log(this.abc)
        return this.abc
      }
    }

    watch(this.a, () => {
      console.log(`a 改变了`)
    })
  }
  add() {
    console.log(this.c.abc, this)
    console.log(this.c.add())
    console.log(this.a)
    this.a = this.a + 1
    console.log(this.a)
    //这里this不一样
    this.add2()
  }
  add3() {
    console.log(this.a)
    this.a.value = this.a.value + 1
    console.log(this.a)
    //这里this不一样
    this.add2()
  }
  add2() {
    console.log(this, 'add2')
  }
  watch() {}
}
const test = new Test()
export default {
  data() {
    return {
      test: null,
      isLoad: false
    }
  },
  methods: {
    add() {
      this.test.add()
      //test.add()
      ////triggerRef(this.test)
      ////console.log(this.test)
      ////this.$forceUpdate()
      //watchEffect(() => {
      //test.add()
      //})
    }
  },
  mounted() {
    //this.test = markRaw(test)
    //markRaw 还会改变原始对象，真6
    this.test = new Test()
    this.test2 = markRaw(new Test())
    this.isLoad = true

    let abc = {
      a: 1,
      b: 2,
      c: {
        a: 1,
        b: 2
      }
    }

    let reactiveObj = reactive(abc)
    console.log(reactiveObj.c)

    let abc2 = {
      a: 1,
      b: 2,
      add() {
        console.log(toRaw(this), 'toRaw')
      }
    }
    let abc_reactive = reactive(abc2)
    abc_reactive.add()
    let abc3 = toRaw(abc2)
    console.log(abc3 === abc2)
  }
}
</script>
